<template>
  <!--    个人盲点     -->

  <view class="allContainer" :style="[{ minHeight: '834rpx' }]">
    <image
      :src="cloudImg"
      :style="[
        { width: '158rpx' },
        { height: '138rpx' },
        { position: 'absolute' },
        { right: '0' },
        { top: '-30rpx' },
      ]"
    />
    <image class="textImg" :src="partTextImgUrl" />
    <image class="sunImg" :src="sunImg" />

    <view :style="[{ paddingRight: '32rpx' }, { paddingLeft: '32rpx' }]">
      <view class="contentBack">
        <view
          :style="[
            { marginTop: '33rpx' },
            { display: 'flex' },
            { alignItems: 'center' },
          ]"
        >
          <!-- <span class="smallTitleGreen">毕方倾注灵力为你</span> -->
          <view class="blackBox"></view>
          <view>
            <span
              :class="item.color == 1 ? 'smallTitleGreen' : 'smallTitleRed'"
              v-for="(item, index) in personalBlindSpots.title"
              :key="index"
              >{{ item.label }}</span
            >
          </view>
        </view>

        <view
          class="onePartContent"
          v-for="(descItem, descIndex) in personalBlindSpots.desc"
          :key="descIndex"
        >
          <image :src="arrowYellow" class="arrowYellow"></image>
          <view style="flex: 1">{{ descItem }}</view>
        </view>
        <image :src="bottomImg" class="bottomImg" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  // components: {},
  props: {
    isBlur: {
      type: Boolean,
      default: false,
    },

    personalBlindSpots: {
      type: Object,
      default() {
        return {
          title: [
            {
              color: "1",
              label: "测试测试测试测试",
            },
            {
              color: "2",
              label: "测试测试测试测试",
            },
          ],
          desc: [
            "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
            "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
            "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
            "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
            "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
          ],
        };
      },
    },
  },
  data() {
    return {
      cloudImg:
        "https://img3.job1001.com/ypMp/elan/images/career/careerAssessResult/bg_part3_2.png",
      // bgUrl:
      //   "https://img3.job1001.com/ypMp/elan/images/career/careerAssessResult/bg_part2.png",
      partTextImgUrl: this.$imgBaseSelf + "career/careerAssessNew/title2.png",
      arrowYellow: this.$imgBaseSelf + "career/careerAssessNew/arrowYellow.png",
      sunImg: this.$imgBaseSelf + "career/careerAssessNew/sun.png",
      bottomImg:
        "https://img3.job1001.com/ypMp/elan/images/career/careerAssessNew/bottom.png",
    };
  },
  mounted() {
    uni
      .createSelectorQuery()
      .in(this)
      .select(".allContainer")
      .boundingClientRect((rect) => {
        this.$emit("listenRect", rect, 2);
      })
      .exec();
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.allContainer {
  position: relative;
  // min-height: 534rpx;
  padding-bottom: 60rpx;
  width: 100%;
}

.textImg {
  position: relative;
  width: 100%;
  height: 268rpx;
  image-rendering: -webkit-optimize-contrast;
  z-index: 9;
}
.sunImg {
  position: absolute;
  bottom: 280rpx;
  width: 143rpx;
  right: 0;
  height: 247rpx;
}
.contentBack {
  position: relative;
  width: 100%;
  margin-top: -86rpx;
  background: linear-gradient(
    to bottom,
    #f5cb83 0%,
    #fde8bd 50rpx,
    #fefdeb 80rpx,
    #f9f7e5 100%
  );
  padding: 20rpx 0 80rpx 0;
  border-radius: 15rpx 0 15rpx 15rpx;
}
.smallTitleGreen {
  font-size: 34rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #000;
  //line-height: 120rpx;
}

.smallTitleRed {
  font-size: 34rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ed5c22;
  //	line-height: 120rpx;
}
.blackBox {
  content: "";
  width: 10rpx;
  max-width: 10rpx;
  height: 38rpx;
  margin-top: 6rpx;
  margin-right: 20rpx;
  background: #000;
  color: #000;
  font-size: 26rpx;
}
.onePartContent {
  margin-top: 40rpx;
  padding-right: 50rpx;
  font-size: 30rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #555555;
  line-height: 48rpx;
  display: flex;
}
.arrowYellow {
  width: 36rpx;
  height: 20rpx;
  margin-top: 16rpx;
  margin-right: 14rpx;
}
.bottomImg {
  position: absolute;
  width: 100%;
  height: 40rpx;
  right: 0rpx;
  bottom: 0rpx;
}
</style>
